import React, { useEffect, useState } from "react";
import FormItem from "./FormItem";
import { Row, Col } from "antd";
const AdvancedFormItem = (props) => {
  const [advancedSetupItem, setAdvancedSetupItem] = useState([]);
  const [itemkey, setItemKey] = useState("");
  useEffect(() => {
    setAdvancedSetupItem(props.advancedSetupItem);
    setItemKey(props.advancedSetupItem.key);
  }, []);

  const bRequired = !(advancedSetupItem.permitNull == 1);

  return (
    <>
      <Row>
        <Col span={4}>
          <div className="label-wrapper">
            <span className="advanced-setup-form-item-label">
              {advancedSetupItem.name}
            </span>
          </div>
        </Col>
        <Col span={19}>
          {advancedSetupItem &&
            advancedSetupItem.inputs &&
            advancedSetupItem.inputs.map((data, index) => {
              if (data) {
                return (
                  <FormItem
                    type="advanced"
                    bRequired={bRequired}
                    key={index}
                    fieldData={data}
                    itemKey={itemkey + "-" + data.key}
                    form={props.form}
                  ></FormItem>
                );
              }
            })}
        </Col>
      </Row>
      <hr
        style={{
          border: "none",
          borderTop: "1px solid #EBEBEB",
          marginTop: "15px",
        }}
      />
    </>
  );
};

export default AdvancedFormItem;
